<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>食谱管理 - 饮食营养管理系统</title>
    <!-- TailwindCSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- FontAwesome CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
    <!-- Vue.js CDN -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body class="bg-gray-50">
    <div id="app" class="min-h-screen flex flex-col">
        <!-- 顶部导航栏 -->
        <nav class="bg-emerald-600 text-white shadow-md">
            <div class="container mx-auto px-4 py-3 flex justify-between items-center">
                <div class="flex items-center space-x-2">
                    <i class="fas fa-leaf text-2xl"></i>
                    <span class="text-xl font-bold">营养师后台管理系统</span>
                </div>
                <div class="flex items-center space-x-4">
                    <a href="#" class="hover:text-emerald-200">
                        <i class="fas fa-bell"></i>
                        <span class="bg-red-500 text-white rounded-full w-5 h-5 text-xs flex items-center justify-center absolute -mt-8 ml-3">3</span>
                    </a>
                    <div class="relative group">
                        <div class="flex items-center space-x-2 cursor-pointer">
                            <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=150&h=150&q=80" 
                                class="w-8 h-8 rounded-full object-cover" alt="用户头像">
                            <span>管理员</span>
                            <i class="fas fa-chevron-down text-xs"></i>
                        </div>
                        <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 hidden group-hover:block">
                            <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-emerald-100">
                                <i class="fas fa-user mr-2"></i>个人信息
                            </a>
                            <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-emerald-100">
                                <i class="fas fa-cog mr-2"></i>系统设置
                            </a>
                            <div class="border-t border-gray-200 my-1"></div>
                            <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-emerald-100">
                                <i class="fas fa-sign-out-alt mr-2"></i>退出登录
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </nav>

        <!-- 主要内容区 -->
        <div class="flex flex-1">
            <!-- 侧边导航 -->
            <aside class="bg-white w-64 shadow-md">
                <div class="p-4">
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                            <i class="fas fa-search text-gray-400"></i>
                        </span>
                        <input type="text" class="pl-10 pr-4 py-2 w-full rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" 
                            placeholder="搜索...">
                    </div>
                </div>
                <nav class="mt-2">
                    <a href="index.html" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-emerald-600">
                        <i class="fas fa-home mr-3"></i>
                        <span>仪表盘</span>
                    </a>
                    <a href="users.html" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-emerald-600">
                        <i class="fas fa-users mr-3"></i>
                        <span>用户管理</span>
                    </a>
                    <a href="foods.html" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-emerald-600">
                        <i class="fas fa-apple-alt mr-3"></i>
                        <span>食物数据库</span>
                    </a>
                    <a href="recipes.html" class="flex items-center px-4 py-3 text-emerald-600 bg-emerald-50 border-l-4 border-emerald-600">
                        <i class="fas fa-utensils mr-3"></i>
                        <span>食谱管理</span>
                    </a>
                    <a href="diet-records.html" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-emerald-600">
                        <i class="fas fa-clipboard-list mr-3"></i>
                        <span>饮食记录</span>
                    </a>
                    <a href="nutrition.html" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-emerald-600">
                        <i class="fas fa-chart-pie mr-3"></i>
                        <span>营养分析</span>
                    </a>
                    <a href="settings.html" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-emerald-600">
                        <i class="fas fa-cog mr-3"></i>
                        <span>系统设置</span>
                    </a>
                </nav>
            </aside>

            <!-- 主内容 -->
            <main class="flex-1 p-6">
                <div class="mb-6 flex justify-between items-center">
                    <div>
                        <h1 class="text-2xl font-bold text-gray-800">食谱管理</h1>
                        <p class="text-gray-600">管理食谱数据、分类和推荐</p>
                    </div>
                    <button id="openAddRecipeModalBtn" class="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-md flex items-center">
                        <i class="fas fa-plus mr-2"></i>
                        <span>创建食谱</span>
                    </button>
                </div>

                <!-- 食谱分类 -->
                <div class="mb-6">
                    <h2 class="text-lg font-medium text-gray-800 mb-3">食谱分类</h2>
                    <div class="flex flex-wrap gap-2">
                        <button class="bg-emerald-600 text-white px-4 py-2 rounded-md flex items-center text-sm">
                            所有分类
                        </button>
                        <button class="bg-white hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-md border border-gray-300 flex items-center text-sm">
                            <i class="fas fa-drumstick-bite mr-2 text-amber-500"></i>
                            肉类菜肴
                        </button>
                        <button class="bg-white hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-md border border-gray-300 flex items-center text-sm">
                            <i class="fas fa-fish mr-2 text-blue-500"></i>
                            海鲜料理
                        </button>
                        <button class="bg-white hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-md border border-gray-300 flex items-center text-sm">
                            <i class="fas fa-carrot mr-2 text-orange-500"></i>
                            素食菜肴
                        </button>
                        <button class="bg-white hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-md border border-gray-300 flex items-center text-sm">
                            <i class="fas fa-bread-slice mr-2 text-yellow-700"></i>
                            主食面点
                        </button>
                        <button class="bg-white hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-md border border-gray-300 flex items-center text-sm">
                            <i class="fas fa-ice-cream mr-2 text-pink-500"></i>
                            甜点饮品
                        </button>
                        <button class="bg-white hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-md border border-gray-300 flex items-center text-sm">
                            <i class="fas fa-seedling mr-2 text-green-500"></i>
                            低脂健康
                        </button>
                        <button class="bg-white hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-md border border-gray-300 flex items-center text-sm">
                            <i class="fas fa-fire mr-2 text-red-500"></i>
                            高蛋白
                        </button>
                    </div>
                </div>

                <!-- 筛选和搜索 -->
                <div class="bg-white rounded-lg shadow-md p-4 mb-6">
                    <div class="flex flex-wrap gap-4">
                        <div class="relative flex-grow md:max-w-xs">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                                <i class="fas fa-search text-gray-400"></i>
                            </span>
                            <input type="text" class="pl-10 pr-4 py-2 w-full rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" 
                                placeholder="搜索食谱...">
                        </div>
                        
                        <div class="flex items-center space-x-4 flex-wrap">
                            <select class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                                <option value="">难度级别</option>
                                <option value="1">简单</option>
                                <option value="2">中等</option>
                                <option value="3">困难</option>
                            </select>
                            
                            <select class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                                <option value="">烹饪时间</option>
                                <option value="quick">快速 (<15分钟)</option>
                                <option value="medium">适中 (15-30分钟)</option>
                                <option value="long">较长 (>30分钟)</option>
                            </select>
                            
                            <select class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                                <option value="">验证状态</option>
                                <option value="verified">已验证</option>
                                <option value="unverified">未验证</option>
                            </select>
                        </div>
                        
                        <button class="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-md ml-auto">
                            筛选
                        </button>
                    </div>
                </div>

                <!-- 食谱列表 -->
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
                    <!-- 食谱卡片 1 -->
                    <div class="bg-white rounded-lg shadow-md overflow-hidden">
                        <div class="relative">
                            <img src="https://images.unsplash.com/photo-1547592180-85f173990554?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&h=200&q=80" 
                                class="w-full h-48 object-cover" alt="食谱图片">
                            <div class="absolute top-2 left-2">
                                <span class="bg-green-500 text-white text-xs px-2 py-1 rounded-full">已验证</span>
                            </div>
                            <div class="absolute top-2 right-2">
                                <button class="bg-white text-gray-600 rounded-full w-8 h-8 flex items-center justify-center shadow-md hover:bg-gray-100">
                                    <i class="fas fa-heart text-red-500"></i>
                                </button>
                            </div>
                        </div>
                        <div class="p-4">
                            <div class="flex justify-between items-start mb-2">
                                <h3 class="text-lg font-medium text-gray-800">香煎三文鱼配芦笋</h3>
                                <div class="flex items-center">
                                    <span class="text-amber-500 mr-1"><i class="fas fa-star"></i></span>
                                    <span class="text-sm text-gray-600">4.8</span>
                                </div>
                            </div>
                            <div class="mb-3 text-sm text-gray-600 line-clamp-2">
                                香煎三文鱼搭配新鲜芦笋，简单又营养的健康料理。富含欧米茄3脂肪酸和优质蛋白质。
                            </div>
                            <div class="flex items-center text-xs text-gray-500 space-x-2 mb-3">
                                <span><i class="fas fa-clock mr-1"></i> 20分钟</span>
                                <span><i class="fas fa-fire mr-1"></i> 320卡路里</span>
                                <span><i class="fas fa-signal mr-1"></i> 中等难度</span>
                            </div>
                            <div class="flex">
                                <span class="text-xs bg-blue-100 text-blue-800 rounded-full px-2 py-1 mr-1">高蛋白</span>
                                <span class="text-xs bg-green-100 text-green-800 rounded-full px-2 py-1 mr-1">低碳水</span>
                                <span class="text-xs bg-purple-100 text-purple-800 rounded-full px-2 py-1">海鲜</span>
                            </div>
                        </div>
                        <div class="border-t border-gray-100 px-4 py-2 flex justify-between">
                            <div class="flex space-x-1">
                                <button class="text-gray-600 hover:text-blue-600"><i class="fas fa-eye"></i></button>
                                <button class="text-gray-600 hover:text-emerald-600"><i class="fas fa-edit"></i></button>
                                <button class="text-gray-600 hover:text-red-600"><i class="fas fa-trash-alt"></i></button>
                            </div>
                            <div>
                                <button class="text-xs bg-emerald-50 text-emerald-700 px-2 py-1 rounded-md hover:bg-emerald-100">
                                    推荐
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 食谱卡片 2 -->
                    <div class="bg-white rounded-lg shadow-md overflow-hidden">
                        <div class="relative">
                            <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&h=200&q=80" 
                                class="w-full h-48 object-cover" alt="食谱图片">
                            <div class="absolute top-2 left-2">
                                <span class="bg-green-500 text-white text-xs px-2 py-1 rounded-full">已验证</span>
                            </div>
                            <div class="absolute top-2 right-2">
                                <button class="bg-white text-gray-600 rounded-full w-8 h-8 flex items-center justify-center shadow-md hover:bg-gray-100">
                                    <i class="far fa-heart text-gray-400"></i>
                                </button>
                            </div>
                        </div>
                        <div class="p-4">
                            <div class="flex justify-between items-start mb-2">
                                <h3 class="text-lg font-medium text-gray-800">彩虹沙拉碗</h3>
                                <div class="flex items-center">
                                    <span class="text-amber-500 mr-1"><i class="fas fa-star"></i></span>
                                    <span class="text-sm text-gray-600">4.5</span>
                                </div>
                            </div>
                            <div class="mb-3 text-sm text-gray-600 line-clamp-2">
                                色彩缤纷的蔬菜沙拉碗，含有丰富的维生素和抗氧化物质。可选择添加藜麦或糙米增加饱腹感。
                            </div>
                            <div class="flex items-center text-xs text-gray-500 space-x-2 mb-3">
                                <span><i class="fas fa-clock mr-1"></i> 15分钟</span>
                                <span><i class="fas fa-fire mr-1"></i> 250卡路里</span>
                                <span><i class="fas fa-signal mr-1"></i> 简单</span>
                            </div>
                            <div class="flex">
                                <span class="text-xs bg-green-100 text-green-800 rounded-full px-2 py-1 mr-1">素食</span>
                                <span class="text-xs bg-amber-100 text-amber-800 rounded-full px-2 py-1 mr-1">低热量</span>
                                <span class="text-xs bg-indigo-100 text-indigo-800 rounded-full px-2 py-1">高纤维</span>
                            </div>
                        </div>
                        <div class="border-t border-gray-100 px-4 py-2 flex justify-between">
                            <div class="flex space-x-1">
                                <button class="text-gray-600 hover:text-blue-600"><i class="fas fa-eye"></i></button>
                                <button class="text-gray-600 hover:text-emerald-600"><i class="fas fa-edit"></i></button>
                                <button class="text-gray-600 hover:text-red-600"><i class="fas fa-trash-alt"></i></button>
                            </div>
                            <div>
                                <button class="text-xs bg-emerald-50 text-emerald-700 px-2 py-1 rounded-md hover:bg-emerald-100">
                                    推荐
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 食谱卡片 3 -->
                    <div class="bg-white rounded-lg shadow-md overflow-hidden">
                        <div class="relative">
                            <img src="https://images.unsplash.com/photo-1565299507177-b0ac66763828?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&h=200&q=80" 
                                class="w-full h-48 object-cover" alt="食谱图片">
                            <div class="absolute top-2 left-2">
                                <span class="bg-yellow-500 text-white text-xs px-2 py-1 rounded-full">待验证</span>
                            </div>
                            <div class="absolute top-2 right-2">
                                <button class="bg-white text-gray-600 rounded-full w-8 h-8 flex items-center justify-center shadow-md hover:bg-gray-100">
                                    <i class="far fa-heart text-gray-400"></i>
                                </button>
                            </div>
                        </div>
                        <div class="p-4">
                            <div class="flex justify-between items-start mb-2">
                                <h3 class="text-lg font-medium text-gray-800">蒜香烤鸡胸肉</h3>
                                <div class="flex items-center">
                                    <span class="text-amber-500 mr-1"><i class="fas fa-star"></i></span>
                                    <span class="text-sm text-gray-600">4.2</span>
                                </div>
                            </div>
                            <div class="mb-3 text-sm text-gray-600 line-clamp-2">
                                多汁嫩滑的烤鸡胸肉，蒜香四溢，搭配烤蔬菜或沙拉作为健康的高蛋白餐食。
                            </div>
                            <div class="flex items-center text-xs text-gray-500 space-x-2 mb-3">
                                <span><i class="fas fa-clock mr-1"></i> 25分钟</span>
                                <span><i class="fas fa-fire mr-1"></i> 280卡路里</span>
                                <span><i class="fas fa-signal mr-1"></i> 中等难度</span>
                            </div>
                            <div class="flex">
                                <span class="text-xs bg-red-100 text-red-800 rounded-full px-2 py-1 mr-1">高蛋白</span>
                                <span class="text-xs bg-orange-100 text-orange-800 rounded-full px-2 py-1 mr-1">肉类</span>
                                <span class="text-xs bg-green-100 text-green-800 rounded-full px-2 py-1">低脂</span>
                            </div>
                        </div>
                        <div class="border-t border-gray-100 px-4 py-2 flex justify-between">
                            <div class="flex space-x-1">
                                <button class="text-gray-600 hover:text-blue-600"><i class="fas fa-eye"></i></button>
                                <button class="text-gray-600 hover:text-emerald-600"><i class="fas fa-edit"></i></button>
                                <button class="text-gray-600 hover:text-red-600"><i class="fas fa-trash-alt"></i></button>
                            </div>
                            <div>
                                <button class="text-xs bg-amber-50 text-amber-700 px-2 py-1 rounded-md hover:bg-amber-100">
                                    验证
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 分页 -->
                <div class="flex justify-between items-center">
                    <div class="text-sm text-gray-700">
                        显示 <span class="font-medium">1</span> 到 <span class="font-medium">10</span> 条，共 <span class="font-medium">437</span> 条记录
                    </div>
                    <div class="flex space-x-2">
                        <button class="px-3 py-1 rounded-md bg-white border border-gray-300 text-gray-500 hover:bg-gray-50 disabled:opacity-50">
                            上一页
                        </button>
                        <button class="px-3 py-1 rounded-md bg-emerald-600 text-white hover:bg-emerald-700">
                            1
                        </button>
                        <button class="px-3 py-1 rounded-md bg-white border border-gray-300 text-gray-700 hover:bg-gray-50">
                            2
                        </button>
                        <button class="px-3 py-1 rounded-md bg-white border border-gray-300 text-gray-700 hover:bg-gray-50">
                            3
                        </button>
                        <button class="px-3 py-1 rounded-md bg-white border border-gray-300 text-gray-500 hover:bg-gray-50">
                            下一页
                        </button>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- 添加创建食谱的模态框 - 默认隐藏 -->
    <div id="addRecipeModal" class="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center z-50" style="display: none;">
        <div class="bg-white rounded-lg shadow-lg w-full max-w-4xl mx-4 overflow-hidden">
            <!-- 模态框标题 -->
            <div class="bg-emerald-600 text-white px-6 py-4 flex justify-between items-center">
                <h3 class="text-lg font-medium">创建新食谱</h3>
                <button id="closeModalBtn" type="button" class="text-white hover:text-gray-200 focus:outline-none">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <!-- 表单内容 -->
            <div class="px-6 py-4 max-h-[80vh] overflow-y-auto">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- 基本信息 -->
                    <div>
                        <h4 class="text-md font-medium text-gray-700 mb-4">基本信息</h4>

                        <!-- 食谱名称 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1" for="recipeName">
                                食谱名称 <span class="text-red-500">*</span>
                            </label>
                            <input type="text" id="recipeName" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" placeholder="请输入食谱名称">
                            <p id="recipeNameError" class="mt-1 text-sm text-red-600" style="display: none;"></p>
                        </div>

                        <!-- 食谱分类 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1" for="recipeCategory">
                                食谱分类 <span class="text-red-500">*</span>
                            </label>
                            <select id="recipeCategory" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                                <option value="">请选择分类</option>
                                <option value="肉类菜肴">肉类菜肴</option>
                                <option value="海鲜料理">海鲜料理</option>
                                <option value="素食菜肴">素食菜肴</option>
                                <option value="主食面点">主食面点</option>
                                <option value="甜点饮品">甜点饮品</option>
                                <option value="低脂健康">低脂健康</option>
                                <option value="高蛋白">高蛋白</option>
                            </select>
                            <p id="recipeCategoryError" class="mt-1 text-sm text-red-600" style="display: none;"></p>
                        </div>

                        <!-- 难度级别 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1" for="difficultyLevel">
                                难度级别 <span class="text-red-500">*</span>
                            </label>
                            <select id="difficultyLevel" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                                <option value="">请选择难度</option>
                                <option value="简单">简单</option>
                                <option value="中等">中等</option>
                                <option value="困难">困难</option>
                            </select>
                            <p id="difficultyLevelError" class="mt-1 text-sm text-red-600" style="display: none;"></p>
                        </div>

                        <!-- 烹饪时间 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1" for="cookingTime">
                                烹饪时间 (分钟) <span class="text-red-500">*</span>
                            </label>
                            <input type="number" id="cookingTime" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" placeholder="请输入烹饪时间">
                            <p id="cookingTimeError" class="mt-1 text-sm text-red-600" style="display: none;"></p>
                        </div>

                        <!-- 卡路里 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1" for="calories">
                                卡路里 (kcal) <span class="text-red-500">*</span>
                            </label>
                            <input type="number" id="calories" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" placeholder="请输入卡路里">
                            <p id="caloriesError" class="mt-1 text-sm text-red-600" style="display: none;"></p>
                        </div>

                        <!-- 验证状态 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                验证状态
                            </label>
                            <div class="flex space-x-4">
                                <label class="inline-flex items-center">
                                    <input type="radio" name="verificationStatus" value="已验证" class="form-radio text-emerald-600 focus:ring-emerald-500" checked>
                                    <span class="ml-2">已验证</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="radio" name="verificationStatus" value="待验证" class="form-radio text-yellow-500 focus:ring-yellow-500">
                                    <span class="ml-2">待验证</span>
                                </label>
                            </div>
                        </div>

                        <!-- 食谱图片 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                食谱图片
                            </label>
                            <div class="mt-1 flex items-center">
                                <div id="recipeImagePreview" class="w-32 h-24 rounded-md border border-gray-300 flex items-center justify-center bg-gray-100 text-gray-400 overflow-hidden">
                                    <i class="fas fa-image text-2xl"></i>
                                </div>
                                <button type="button" id="uploadImageBtn" class="ml-4 bg-white border border-gray-300 text-gray-700 px-3 py-2 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2">
                                    上传图片
                                </button>
                                <input type="file" id="recipeImageInput" accept="image/*" class="hidden">
                            </div>
                            <p class="mt-1 text-xs text-gray-500">推荐尺寸: 600x400 像素，格式: JPG、PNG</p>
                        </div>
                    </div>

                    <!-- 食材和步骤 -->
                    <div>
                        <h4 class="text-md font-medium text-gray-700 mb-4">食材和烹饪步骤</h4>

                        <!-- 食材列表 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1" for="ingredients">
                                食材列表 <span class="text-red-500">*</span>
                            </label>
                            <textarea id="ingredients" rows="5" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" placeholder="请输入食材列表，每行一个食材，例如：&#10;鸡胸肉 200克&#10;橄榄油 1汤匙&#10;大蒜 3瓣"></textarea>
                            <p id="ingredientsError" class="mt-1 text-sm text-red-600" style="display: none;"></p>
                        </div>

                        <!-- 烹饪步骤 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1" for="cookingSteps">
                                烹饪步骤 <span class="text-red-500">*</span>
                            </label>
                            <textarea id="cookingSteps" rows="7" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" placeholder="请输入烹饪步骤，每个步骤一行，例如：&#10;1. 鸡胸肉切成小块&#10;2. 热锅倒入橄榄油&#10;3. 放入大蒜炒香"></textarea>
                            <p id="cookingStepsError" class="mt-1 text-sm text-red-600" style="display: none;"></p>
                        </div>

                        <!-- 营养标签 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                营养标签
                            </label>
                            <div class="grid grid-cols-2 gap-2">
                                <label class="inline-flex items-center">
                                    <input type="checkbox" name="nutritionTags" value="高蛋白" class="form-checkbox text-emerald-600 rounded focus:ring-emerald-500">
                                    <span class="ml-2">高蛋白</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="checkbox" name="nutritionTags" value="低碳水" class="form-checkbox text-emerald-600 rounded focus:ring-emerald-500">
                                    <span class="ml-2">低碳水</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="checkbox" name="nutritionTags" value="低脂" class="form-checkbox text-emerald-600 rounded focus:ring-emerald-500">
                                    <span class="ml-2">低脂</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="checkbox" name="nutritionTags" value="高纤维" class="form-checkbox text-emerald-600 rounded focus:ring-emerald-500">
                                    <span class="ml-2">高纤维</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="checkbox" name="nutritionTags" value="素食" class="form-checkbox text-emerald-600 rounded focus:ring-emerald-500">
                                    <span class="ml-2">素食</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="checkbox" name="nutritionTags" value="低热量" class="form-checkbox text-emerald-600 rounded focus:ring-emerald-500">
                                    <span class="ml-2">低热量</span>
                                </label>
                            </div>
                        </div>

                        <!-- 备注 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1" for="notes">
                                备注
                            </label>
                            <textarea id="notes" rows="3" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" placeholder="添加关于这个食谱的其他信息"></textarea>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 按钮区域 -->
            <div class="bg-gray-50 px-6 py-4 flex justify-end space-x-3">
                <button type="button" id="cancelBtn" class="bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">
                    取消
                </button>
                <button type="button" id="submitBtn" class="bg-emerald-600 text-white px-4 py-2 rounded-md hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2">
                    创建食谱
                </button>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const app = Vue.createApp({
                data() {
                    return {
                        // 组件数据
                    };
                },
                methods: {
                    // 组件方法
                }
            });
            
            app.mount('#app');
            
            // 模态框功能实现
            const openModalBtn = document.getElementById('openAddRecipeModalBtn');
            const modal = document.getElementById('addRecipeModal');
            const closeModalBtn = document.getElementById('closeModalBtn');
            const cancelBtn = document.getElementById('cancelBtn');
            const submitBtn = document.getElementById('submitBtn');
            const uploadImageBtn = document.getElementById('uploadImageBtn');
            const recipeImageInput = document.getElementById('recipeImageInput');
            const recipeImagePreview = document.getElementById('recipeImagePreview');
            
            let selectedImageFile = null;
            
            // 打开模态框
            function openModal() {
                console.log('打开模态框');
                resetForm();
                modal.style.display = 'flex';
            }
            
            // 关闭模态框
            function closeModal() {
                console.log('关闭模态框');
                modal.style.display = 'none';
            }
            
            // 重置表单
            function resetForm() {
                // 清空所有输入字段
                document.getElementById('recipeName').value = '';
                document.getElementById('recipeCategory').value = '';
                document.getElementById('difficultyLevel').value = '';
                document.getElementById('cookingTime').value = '';
                document.getElementById('calories').value = '';
                document.getElementById('ingredients').value = '';
                document.getElementById('cookingSteps').value = '';
                document.getElementById('notes').value = '';
                
                // 重置验证状态
                document.querySelector('input[name="verificationStatus"][value="已验证"]').checked = true;
                
                // 重置营养标签
                const nutritionTags = document.querySelectorAll('input[name="nutritionTags"]');
                nutritionTags.forEach(tag => tag.checked = false);
                
                // 重置图片预览
                recipeImagePreview.innerHTML = '<i class="fas fa-image text-2xl"></i>';
                selectedImageFile = null;
                
                // 隐藏所有错误信息
                const errorElements = document.querySelectorAll('[id$="Error"]');
                errorElements.forEach(el => el.style.display = 'none');
            }
            
            // 处理图片上传
            function handleImageUpload() {
                recipeImageInput.click();
            }
            
            // 处理图片预览
            function handleImageChange(event) {
                const file = event.target.files[0];
                if (file) {
                    selectedImageFile = file;
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        recipeImagePreview.innerHTML = '';
                        const img = document.createElement('img');
                        img.src = e.target.result;
                        img.className = 'w-full h-full object-cover';
                        recipeImagePreview.appendChild(img);
                    };
                    reader.readAsDataURL(file);
                }
            }
            
            // 验证表单
            function validateForm() {
                let isValid = true;
                
                // 隐藏所有错误信息
                const errorElements = document.querySelectorAll('[id$="Error"]');
                errorElements.forEach(el => el.style.display = 'none');
                
                // 验证食谱名称
                const recipeName = document.getElementById('recipeName').value.trim();
                if (!recipeName) {
                    document.getElementById('recipeNameError').textContent = '请输入食谱名称';
                    document.getElementById('recipeNameError').style.display = 'block';
                    isValid = false;
                }
                
                // 验证食谱分类
                const recipeCategory = document.getElementById('recipeCategory').value;
                if (!recipeCategory) {
                    document.getElementById('recipeCategoryError').textContent = '请选择食谱分类';
                    document.getElementById('recipeCategoryError').style.display = 'block';
                    isValid = false;
                }
                
                // 验证难度级别
                const difficultyLevel = document.getElementById('difficultyLevel').value;
                if (!difficultyLevel) {
                    document.getElementById('difficultyLevelError').textContent = '请选择难度级别';
                    document.getElementById('difficultyLevelError').style.display = 'block';
                    isValid = false;
                }
                
                // 验证烹饪时间
                const cookingTime = document.getElementById('cookingTime').value;
                if (!cookingTime) {
                    document.getElementById('cookingTimeError').textContent = '请输入烹饪时间';
                    document.getElementById('cookingTimeError').style.display = 'block';
                    isValid = false;
                } else if (isNaN(cookingTime) || cookingTime <= 0) {
                    document.getElementById('cookingTimeError').textContent = '请输入有效的烹饪时间';
                    document.getElementById('cookingTimeError').style.display = 'block';
                    isValid = false;
                }
                
                // 验证卡路里
                const calories = document.getElementById('calories').value;
                if (!calories) {
                    document.getElementById('caloriesError').textContent = '请输入卡路里';
                    document.getElementById('caloriesError').style.display = 'block';
                    isValid = false;
                } else if (isNaN(calories) || calories < 0) {
                    document.getElementById('caloriesError').textContent = '请输入有效的卡路里值';
                    document.getElementById('caloriesError').style.display = 'block';
                    isValid = false;
                }
                
                // 验证食材列表
                const ingredients = document.getElementById('ingredients').value.trim();
                if (!ingredients) {
                    document.getElementById('ingredientsError').textContent = '请输入食材列表';
                    document.getElementById('ingredientsError').style.display = 'block';
                    isValid = false;
                }
                
                // 验证烹饪步骤
                const cookingSteps = document.getElementById('cookingSteps').value.trim();
                if (!cookingSteps) {
                    document.getElementById('cookingStepsError').textContent = '请输入烹饪步骤';
                    document.getElementById('cookingStepsError').style.display = 'block';
                    isValid = false;
                }
                
                return isValid;
            }
            
            // 获取选中的营养标签
            function getSelectedNutritionTags() {
                const tags = document.querySelectorAll('input[name="nutritionTags"]:checked');
                return Array.from(tags).map(tag => tag.value);
            }
            
            // 提交表单
            function submitForm() {
                if (validateForm()) {
                    // 收集表单数据
                    const formData = {
                        recipeName: document.getElementById('recipeName').value.trim(),
                        recipeCategory: document.getElementById('recipeCategory').value,
                        difficultyLevel: document.getElementById('difficultyLevel').value,
                        cookingTime: document.getElementById('cookingTime').value,
                        calories: document.getElementById('calories').value,
                        verificationStatus: document.querySelector('input[name="verificationStatus"]:checked').value,
                        ingredients: document.getElementById('ingredients').value.trim(),
                        cookingSteps: document.getElementById('cookingSteps').value.trim(),
                        nutritionTags: getSelectedNutritionTags(),
                        notes: document.getElementById('notes').value.trim(),
                        imageFile: selectedImageFile
                    };
                    
                    console.log('表单数据：', formData);
                    // 这里应该发送请求到服务器添加食谱
                    
                    // 模拟添加成功
                    alert('食谱创建成功！');
                    closeModal();
                    
                    // 刷新食谱列表（这里可以根据实际情况实现）
                }
            }
            
            // 事件监听
            openModalBtn.addEventListener('click', openModal);
            closeModalBtn.addEventListener('click', closeModal);
            cancelBtn.addEventListener('click', closeModal);
            submitBtn.addEventListener('click', submitForm);
            uploadImageBtn.addEventListener('click', handleImageUpload);
            recipeImageInput.addEventListener('change', handleImageChange);
            
            // 确保模态框初始为隐藏状态
            modal.style.display = 'none';
        });
    </script>
</body>
</html> 